<template>
<div class='index'>
  <div class="header">请选择起卦方式</div>
  <div class="button-area">
    <u-button class="button" shape="circle" type="primary" @click="byNowTime">直接起卦</u-button>
    <u-button class="button" shape="circle" type="primary" @click="toStart('number')">数字起卦</u-button>
    <u-button class="button" shape="circle" type="primary" @click="toStart('time')">时间起卦</u-button>
  </div>

  <div class="tips">
      本小六壬速算工具提供三种方式占卜。
      <ul class="list-area">
        <li class="list-item">
          1）不接参数按现在的时间起卜。
        </li>
        <li class="list-item">
          2）选择未来的年、月、日、时（公历），如 2018 4 15 2。
        </li>
        <li class="list-item">
          3）自己输入给出三个数字，如  10 2 3。
        </li>
      </ul>
    </div>
</div>
</template>

<script setup >
import {LiuRen} from '@/utils/index'
import { setRes } from '@/utils/res';

const byNowTime = () => {
  const res = LiuRen.nowDateTell()
  setRes(res)
  uni.navigateTo({
    url: '/pages/res/index'
  })
}


const toStart = (type) => {
  uni.navigateTo({
    url: `/pages/${type}/index`
  })
}
</script>

<style lang='scss' scoped>
.index {
  padding: 40rpx;
  .button-area {
    margin-top: 60rpx;
    display: grid;
    grid-template-columns: 1fr;
    gap: 40rpx;
    .button {
      width: 100%;
    }
  }
  .tips {
    margin-top: 60rpx;
    .list-area {
      margin-top: 40rpx;
    }
    .list-item {
      margin-bottom: 40rpx;
    }
  }
  
  
}
</style>
